<template>
	<div class="main">
		<div class="head">
			<div class="city">
				<span>北京</span>
				<van-icon name="arrow-down" class="icon" />
			</div>
			<div class="search">
				<form action="/">
					<van-search v-model="value" show-action placeholder="找明显,演出,场馆" @search="onSearch"
						@cancel="onCancel" />
				</form>
			</div>
		</div>

		<div class="more">
			<div><img src="../../assets/img/daythief.png" alt=""></div>
			<div>更多必抢 ></div>
		</div>

		<div class="day_thief">
			<div v-for="(item,index) in thief" :key="item.performanceId">
				<div class="img_day">
					<img :src="item.posterUrl" alt="">
				</div>
				<div class="hot"><img src="https://p0.meituan.net/scarlett/fe4f7ed065dfa4f6832187ae6aca956b954.png"
						alt="">火热抢票中
				</div>
				<div>{{item.name}}</div>
			</div>
		</div>

		<div class="newbig">
			<p>大咖新动态</p>
			<div>
				<div class="swiper-container swiper1">
					<div class="swiper-wrapper">
						<div class="swiper-slide first" v-for="(item ,index) in bignew" :key="item.id">
							<img :src="item.headUrl" alt="">
							<p>{{item.celebrityName}}</p>
							<p>{{item.recommendTag}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="newbig">
			<p>什么值得看</p>
			<div class="swiper-container swiper2">
				<div class="swiper-wrapper">
					<div class="swiper-slide two" v-for="(item ,index) in look" :key="item.sort">
						<img :src="item.coverUrl" alt="">
						<div>
							<p>{{item.title}}</p>
							<p>{{item.shortTitle}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="newbig divM">
			<p>为你推荐</p>
			<div class="divM_center">
				<div class="divM_left">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<div class="divModule" v-for="(item,index) in recommend1" :key="item.performanceId">
							<img :src="item.posterUrl" alt="">
							<span>[{{item.cityName}}]{{item.shopName}}</span>
							<p>{{item.showTimeRange}}</p>
							<i>￥{{item.minTicketOrSellPrice}}起</i>
						</div>
					</van-list>
				</div>
				<div class="divM_right">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" >
						<div class="divModule" v-for="(item,index) in recommend2" :key="item.performanceId">
							<img :src="item.posterUrl" alt="">
							<span>[{{item.cityName}}]{{item.shopName}}</span>
							<p>{{item.showTimeRange}}</p>
							<i>￥{{item.minTicketOrSellPrice}}起</i>
						</div>
					</van-list>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Swiper from "swiper";
	import "swiper/swiper-bundle.min.css";
	import uri from "@/config/uri";

	import Vue from 'vue';
	import {
		Icon,
		Search,
		Toast,
		Lazyload,
		List,
	} from 'vant';

	Vue.use(Icon);
	Vue.use(Search);
	Vue.use(Toast);
	Vue.use(List);
	Vue.use(Lazyload);

	export default {
		data() {
			return {
				value: '',
				bignew: {},
				look: {},
				recommend: {},
				pageNum: 1,
				a: null,
				recommend1: [],
				recommend2: [],
				thief: {},
				totle: 0,
				list: [],
				loading: false,
				finished: false,
			};
		},
		methods: {
			onSearch(val) {
				Toast(val);
			},
			onCancel() {
				Toast('取消');
			},
			onLoad() {
				// 异步更新数据
				this.$http.get(uri.performancesOne + '/0;st=4;p=' + parseInt(this.pageNum) +
					';s=20;tft=0?sellChannel=13&cityId=1&lng=0&lat=0').then(data => {
					this.totle = Math.ceil(data.paging.totalHits / 20)
					// console.log(data.data)
					data.data.forEach((item, index) => {
						if (index < 10) {
							this.recommend1.push(item)
						} else {
							this.recommend2.push(item)
						}
					})
					this.loading = false;
					if (this.pageNum <= this.totle) {
						this.pageNum++
						console.log(this.pageNum)
					} else {
						this.finished = true;
					}

				})
			},

		},
		created() {
			//今日必抢
			this.$http.get(uri.thief +
				'?uuid=nvcjf473efguzc4dtqdpfepqi8jzcgef191t4dqkcqczrj1ziy7r6h0voewht0e2&clientType=1&os=1&sellChannel=13&cityId=1&lng=0&lat=0'
			).then(data => {
				this.thief = data.data
			})

			//动态
			this.$http.get(uri.celebrityBasicListOne +
				'?uuid=nvcjf473efguzc4dtqdpfepqi8jzcgef191t4dqkcqczrj1ziy7r6h0voewht0e2&clientType=1&os=1&sellChannel=13&cityId=1&lng=0&lat=0'
			).then(data => {
				this.bignew = data.data
				this.$nextTick(() => {
					var swiper1 = new Swiper('.swiper1', {
						slidesPerView: 5,
						spaceBetween: 10,
						observer: true, //修改swiper自己或子元素时，自动初始化swiper
						observeParents: true, //修改swiper的父元素时，自动初始化swiper
					});
				})
			})

			//值得看
			this.$http.get(uri.movieOnInfoListOne + '?sellChannel=13&cityId=1&lng=0&lat=0').then(data => {
				this.look = data.data
				this.$nextTick(() => {
					var swiper2 = new Swiper('.swiper2', {
						slidesPerView: 3,
						spaceBetween: 10,
						observer: true, //修改swiper自己或子元素时，自动初始化swiper
						observeParents: true, //修改swiper的父元素时，自动初始化swiper
					});
				})
			})


			//推荐
			// this.$http.get(uri.performancesOne + '/0;st=4;p=' + this.pageNum +
			// 	';s=20;tft=0?sellChannel=13&cityId=1&lng=0&lat=0').then(data => {
			// 	this.totle = Math.ceil(data.paging.totalHits / 20)
			// 	data.data.forEach((item, index) => {
			// 		if (index < 10) {
			// 			this.recommend1.push(item)
			// 		} else {
			// 			this.recommend2.push(item)
			// 		}
			// 	})
			// 	this.recommend = data.data
			// 	// console.log(this.recommend2)

			// })
		}
	}
</script>

<style scoped="scoped">
 .main {
     padding-bottom: 50px;
     width: 100%;
}
 .head {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .head .city {
     width: 20%;
     text-align: center;
}
 .head .search {
     width: 80%;
}
 .more {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 20px;
     margin-top: 32px;
}
 .more div:nth-of-type(1) img {
     width: 80px;
}
 .more div:nth-of-type(2) {
     width: 80px;
     background-color: #f5f5f5;
     text-align: center;
     border-radius: 10px;
     color: #333;
     font-size: 14px;
}
 .day_thief {
     padding: 8px 22.4px;
     overflow: hidden;
}
 .day_thief>div {
     width: 30%;
     float: left;
}
 .day_thief div:nth-of-type(2) {
     margin: 0 12.8px;
}
 .img_day img {
     width: 100px;
     height: 176px;
     border-radius: 10px;
     border: 1px solid #aaa;
}
 .hot {
	 width:100%;
     text-align: left;
     font-size: 14.4px;
     background-color: red;
     color: white;
     border-radius: 10px;
     position: relative;
     top: 5px;
     overflow: hidden;
     left: -10px;
}
 .hot img {
     width: 12.8px;
}
 .day_thief div:nth-of-type(3) {
     font-size: .1360px;
     font-weight: 700;
     color: #333;
     line-height: 18px;
}
 .day_thief div div:nth-of-type(3) {
     padding-top: 10px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
}
 .first {
     width: 84px;
     text-align: center;
}
 .newbig {
     padding: 0 20px;
	 margin-top:20px;
}
 .newbig>p {
     font-size: 16px;
     font-weight: 600;
}
 .first img {
     width: 55px;
     height: 55px;
     border-radius: 50%;
}
 .first p {
     margin: 0;
     font-weight: 700;
     color: #333;
     line-height: 17px;
     text-align: center;
     font-size: 8px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
}
 .first p:nth-of-type(2) {
     font-size: 8px;
     color: #999;
}
 .two {
     width: 110px;
     height: 156px;
     position: relative;
     color: white;
     font-size: 14px;
     font-weight: bold;
	 margin-top:20px;
}
 .two img {
     width: 100px;
	 height: 150px;
     position: absolute;
     z-index: -111;
     border-radius: .128px;
}
 .two div {
     width: 100%;
     opacity: .8;
}
 .two p:nth-of-type(1) {
     font-size: 16px;
     padding-top: 10px;
     padding-bottom: .48px;
}
 .two p {
     margin: 0;
     margin-left: 10px;
}
 .divM {
    /* display: flex;
     */
     overflow: hidden;
}
 .divM_center {
	 margin-top:10px;
     width: 100%;
     display: flex;
     justify-content: space-around;
}
 .divM_left, .divM_right {
     width: 45%;
}
 .divModule {
     width: 150px;
     margin: 10px 4.8px 0 0;
     padding: 0;
     border: .50000px solid rgba(0, 0, 0, .15);
     border-radius: .6000px;
     float: left;
     position: relative;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
}
 .divModule img {
     border-radius: .80px .80px 0 0;
     width: 150px;
}
 .divModule p {
     margin-top: .400px;
     font-size: .1200px;
     color: #999;
     line-height: 17px;
     margin-left: 10px;
}
 .divModule span {
     max-height: 48px;
     margin-top: .6000px;
     font-size: .144px;
     line-height: 19px;
     font-weight: 700;
     color: #333;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     text-overflow: ellipsis;
     overflow: hidden;
     margin-left: 10px;
}
 .divModule i {
     display: flex;
     height: 19px;
     margin-top: .70000px;
     margin-left: 10px;
     font-size: 16px;
     font-weight: 700;
     color: #f03d37;
     line-height: 19px;
     font-family: DINAlternate-Bold, Roboto-Medium;
     font-style: normal;
}
 
</style>
